<template>
  <div>
    <van-nav-bar title="商品分类" />
    <div class="top_cate">
      <van-search placeholder="请输入搜索关键词" input-align="center" />
    </div>
    <!-- 分类导航 -->
    <van-tree-select
      height="80vh"
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <van-divider>{{
          items[active] ? items[active].catename : ""
        }}</van-divider>

        <van-grid :column-num="3">
          <van-grid-item
            @click="togoodslist(obj.id)"
            v-for="(obj, ind) in items[active] ? items[active].children : []"
            :key="ind"
            :icon="$imgHost + obj.img"
            :text="obj.catename"
          />
        </van-grid>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import { getAllCate ,checktoken} from "../../request/api.js";
export default {
  data() {
    return {
      active: 0,
      items: [],
    };
  },
  methods: {
    togoodslist(id) {
      //跳转到商品列表页
      //tid=2:表示cid的值为二级类别id
      this.$router.push(`/goodslist?cid=${id}&tid=2`);
    },
  },
  mounted() {
    getAllCate().then((d) => {
      if (d.data.code == 200) {
        for (let obj of d.data.list) {
          obj.text = obj.catename;
        }
        this.items = d.data.list;
        // console.log(this.items);
      }
    });
  },
};
</script>

<style scoped>
::v-deep .van-nav-bar__content {
  position: fixed;
  background-color: #ff6041;
  top: 0;
  left: 0;
  width: 100vw;
}
::v-deep .van-nav-bar__title,
::v-deep .van-icon-arrow-left:before {
  color: white;
  font-weight: bold;
}
.top_cate {
  display: flex;
  justify-content: center;
  margin-top: 46px;
  padding-bottom: 20px;
  background-color: #ff6041;
}
.van-search {
  height: 40px;
  margin: 0 20px;
  width: 93vw;
  border-radius: 8px;
}
.van-hairline--bottom::after {
  border-bottom-width: 0px;
}
.van-tree-select__nav {
  text-align: center;
}
.van-sidebar-item--select,
.van-sidebar-item--select:active {
  color: #ff6041;
  font-weight: bold;
}
.van-sidebar-item--select::before {
  background-color: #ff6041;
}
::v-deep .van-sidebar-item--select::before {
  width: 23px;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
}
::v-deep .van-sidebar-item--select::after {
  width: 23px;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
  position: absolute;
  top: 50%;
  right: 0;
  width: 4px;
  height: 16px;
  background-color: #ff6041;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "";
}
.van-divider{
  font-weight: bold;
  color: #ff6041;
}
</style>